<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3" :xs="24">
        <Tree style="margin-left: 20px; margin-top: 20px;" :showCheckbox="true" @projectSelect="fetchData"
          @deviceSelect="fetchData"></Tree>
      </el-col>
      <el-col :span="20" :xs="24">
        <div class="container">
          <!-- 搜索栏 -->
          <div class="search-wrapper">
            <div class="search-bar">
              <span style="font-size: 16px;">设备筛选：</span>
              <el-date-picker v-model="values" type="daterange" range-separator="至" start-placeholder="开始日期"
                end-placeholder="结束日期" @change="PickerDate">
              </el-date-picker>
              <div style="margin-left: 10px;">
                <el-button type="primary" size="small" @click="setDateRange(1)">近24小时</el-button>
                <el-button type="primary" size="small" @click="setDateRange(7)">近7天</el-button>
                <el-button type="primary" size="small" @click="setDateRange(30)">近30天</el-button>
              </div>
            </div>
          </div>
          <el-row class="box-container">
            <!-- 左右两个盒子 -->
            <el-col :span="12" :xs="24" class="box">
              <i class="el-icon-data-analysis">平均值对比</i>
              <div ref="chart" class="chart" id="chart">
              </div>
            </el-col>
            <el-col :span="12" :xs="24" class="box">
              <i class="el-icon-pie-chart">报警类型分析</i>
              <div id="main" style="width: 400px; height: 250px;">
                <Dabing v-if="BingShou"></Dabing>
              </div>
            </el-col>

          </el-row>
          <!-- 单独一行的盒子 -->
          <el-row class="box-container">
            <el-col :span="24" :xs="24" class="full-width-box">
              <i class="el-icon-data-line">环境因子走势</i>
              <!-- <div id="huanjing" style="height: 300px;"> -->
              <LineCharts :LineList="[EchartsData]" :Time="time" v-if="ZheShou"></LineCharts>
              <!-- </div> -->
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Tree from "../../components/Tree/Tree.vue"
import * as echarts from 'echarts';
import { MapListALL } from '../../api/system/device'
import { listUser } from '../../api/system/user'
import { Loading } from 'element-ui';
import LineCharts from "./Line .vue"
import Dabing from './Dabing.vue';
export default {
  components: {
    Tree,
    Dabing,
    LineCharts
  },
  mounted() {

  },
  data() {
    return {
      Xvalue: [],
      chartInstance: null, // Echarts实例,
      values: "",
      BingShou: false,
      BingShou: false,
      data: null,
      EchartsData: [],
      time: [],
      ZheShou: false,
      item: "",
      WEIyi: false,
      time: [],
      ZheShou: false,
      item: "",
      WEIyi: false
    }
  },
  methods: {
    isDevice(e) {
      if (e.devId) {
        this.queryParams.deviceId = e.id
        this.queryParams.deptId = ''
      }
      else {
        this.queryParams.deviceId = ''
        this.queryParams.deptId = e.id
      }
      console.log(this.queryParams);
      // this.selectListWarn()
    },
    fetchData(item) {
      this.item = item
      listUser({deviceId:item.id}).then(res=>{
          this.EchartsData=res.rows
        })
        console.log(123456,this.EchartsData);
      try {
        Loading.service({
          text: '加载中...'
        });

        // this.EchartsData = res.rows.find(data => data.deviceId == item.id)
        // console.log(res,this.item,this.EchartsData)
        if (this.EchartsData) {
          console.log(this.EchartsData);
          this.ZheShou = true
          this.BingShou = true
          this.clearChart(); // 清空图表
          if(this.EchartsData.length>0){
            this.ZhuEcharts();
          }
          this.time = this.Day()
          this.WEIyi = true
          this.LineID=item.id
          this.ZheShou = true
          this.setDateRange(1)
          console.log(this.time)

        } else {
          this.clearChart(); // 清空图表
          this.showNoDataMessage(); // 显示暂无数据的提示
          this.BingShou = false
          this.ZheShou = false
          this.WEIyi = false
        }
        Loading.service().close()
      } catch (error) {
        console.error('Error fetching data:', error);
        this.clearChart(); // 清空图表
        this.showNoDataMessage(); // 显示暂无数据的提示
      }
    },
    clearChart() {
      this.chartInstance = echarts.init(this.$refs.chart);
      this.chartInstance.clear();
    },
    showNoDataMessage() {
      const hasGraphic = this.chartInstance.getOption().graphic;
      if (hasGraphic) {
        this.chartInstance.removeGraphic();
      }
      this.chartInstance.setOption({
        graphic: {
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            text: '暂无数据',
            fontSize: 16,
            fontWeight: 'bold'
          }
        }
      });
    },

    ZhuEcharts() {
      this.chartInstance = echarts.init(this.$refs.chart);
      console.log(this.EchartsData);
      const data = [
        { name: 'daqiya', value: parseFloat(this.EchartsData[0].daqiya) },
        { name: 'daqiya', value: parseFloat(this.EchartsData[0].daqiya) },
        { name: 'fengli', value: parseFloat(this.EchartsData[0].fengli) },
        { name: 'fengsu', value: parseFloat(this.EchartsData[0].fengsu) },
        { name: 'fengxiang', value: parseFloat(this.EchartsData[0].fengxiang) },
        { name: 'fengxiangDangWei', value: parseFloat(this.EchartsData[0].fengxiangDangWei) },
        { name: 'pmTen', value: parseFloat(this.EchartsData[0].pmTen) },
        { name: 'pmTwoFive', value: parseFloat(this.EchartsData[0].pmTwoFive) },
        { name: 'shidu', value: parseFloat(this.EchartsData[0].shidu) },
        { name: 'tsp', value: parseFloat(this.EchartsData[0].tsp) },
        { name: 'wendu', value: parseFloat(this.EchartsData[0].wendu) },
        { name: 'zaosheng', value: parseFloat(this.EchartsData[0].zaosheng) },
      ];
      const option = {
        //配置项
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: [
          {
            //X轴
            type: 'category',
            data: ['大气压', '风力', '风速', '风向', '风向单位', 'PM10', 'PM2.5', '湿度', 'TSP', '温度', '噪声',],
            data: ['大气压', '风力', '风速', '风向', '风向单位', 'PM10', 'PM2.5', '湿度', 'TSP', '温度', '噪声',],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              interval: 0, // 控制刻度的显示间隔，0表示全部显示
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Data',
            type: 'bar',

            data: data.map(item => item.value)
          }
        ]
      };

      // 使用option配置创建柱状图

      this.chartInstance.setOption(option);
      this.chartInstance.on('mousedown', (e) => {
      });
    }


    , setDateRange(days) {
      this.ZheShou = true
      // 根据天数设置日期范围
      const endDate = new Date(); // 当前日期
      const startDate = new Date();
      startDate.setDate(startDate.getDate() - days);
      //   (startDate, endDate)
      if (this.WEIyi) {
        this.values = [startDate, endDate];
        this.time = this.values;
      } else {
        this.WEIyi = false
      if (this.WEIyi) {
        this.values = [startDate, endDate];
        this.time = this.values;
      } else {
        this.WEIyi = false
      }
    }
    },
    PickerDate() {

      this.time = this.values
      this.time = this.values
      console.log(this.time)
    },

    Day() {
      const endDate = new Date(); // 当前日期
      const startDate = new Date();
      return [startDate, endDate]

    }

}
}
</script>
<style scoped>
.container
{
  flex: 6;
  height: 100%;
}

.Tree
{
  flex: 1;
}

.chart
{
  width: 100%;
  height: 250px;
}

.inline-p
{
  /* display: inline; */

  width: 30px;
  height: 30px;
}

.search-wrapper
{

  margin-bottom: 10px;
  margin-top: 5px;

}

.search-bar
{
  display: flex;
  /* 添加此行以使子元素在一行内显示 */
  align-items: center;
  /* 水平居中对齐 */

  margin: 0 10px;
  height: 56px;
}



.box-container
{
  display: flex;
  gap: 10px;
  margin: 10px;
}

.box
{
  box-sizing: border-box;
  width: 50%;
  height: 270px;
  background-color: #fafafa;
  /* 修改盒子背景色 */
  color: rgb(0 59 147);

  /** 字体位置 */
  padding: 15px;
  font-size: 16px;
  /* 调整文字大小 */
  font-weight: bold;
  /* 加粗字体 */
  border-radius: 10px;
  /* 添加圆角边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果 */
}

.box1
{

  /* 修改盒子1的背景色 */
  color: rgb(4, 93, 227);
  /* 修改字体颜色 */
}

.box2
{

  /* 修改盒子2的背景色 */
  color: rgb(4, 93, 227);
  /* 修改字体颜色 */
}

.full-width-box
{
  height: 420px;
  /* flex-grow: 1; */
  background-color: #fafafa;
  /* 修改盒子的背景色 */
  padding: 15px 0 0 15px;
  font-size: 16px;
  /* 调整文字大小 */
  font-weight: bold;
  /* 加粗字体 */
  color: rgb(0 59 147);

  /* 修改字体颜色 */
  border-radius: 10px;
  /* 添加圆角边框 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 添加阴影效果 */
}
</style>
